<template>
  <!-- 添加漂浮容器和美化样式 -->
  <div class="layer-tree-container">
    <el-tree class="layer-tree" :data="layerTreeData" :props="treeProps" show-checkbox node-key="id"
     :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" @check="handleCheck">
    </el-tree>
  </div>
</template>



<script>
import { layerTreeData } from '@/views/biz/utils/config';

export default {
  name: 'LayerTree',
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'name'
      },
      layerTreeData: layerTreeData,
      checkedLayers: [],
      defaultCheckedKeys: ['zidongzhan'],

      // defaultCheckedKeys: []

    };
  },
  mounted() {
    this.initCheckedLayers();
  },
  methods: {
    // 获取所有选中的叶子节点
    getCheckedLeafNodes(nodes, checkedNodes) {
      let leafNodes = [];

      const traverse = (nodeList) => {
        nodeList.forEach(node => {
          // 判断是否为叶子节点（没有children或children为空数组）
          if (!node.children || node.children.length === 0) {
            // 检查该节点是否在选中节点列表中
            const isChecked = checkedNodes.some(checkedNode => checkedNode.id === node.id);
            if (isChecked) {
              // 检查是否已存在，避免重复添加
              const exists = leafNodes.some(leafNode => leafNode.id === node.id);
              if (!exists) {
                leafNodes.push(node);
              }
            }
          } else {
            // 递归处理子节点
            traverse(node.children);
          }
        });
      };

      traverse(nodes);
      return leafNodes;
    },
    initCheckedLayers() {
      // 初始化时获取默认选中的叶子节点
      this.checkedLayers = [{
        id: "guokongzhan",
        name: "国控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "guokongzhan",
            layername: "guokongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "shengkongzhan",
        name: "省控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "shengkongzhan",
            layername: "shengkongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "shikongzhan",
        name: "市控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "shikongzhan",
            layername: "shikongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "xiankongzhan",
        name: "县控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "xiankongzhan",
            layername: "xiankongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      }];
      const activeLayer = { "id": "zidongzhan", "name": "自动站" };
      setTimeout(() => {
        this.$emit('layer-change', this.checkedLayers, activeLayer);
      }, 1000);
    },
    // 处理节点选中事件
    handleCheck(data, checkedInfo) {
      const activeLayer = { id: data.id, name: data.name };
      // 获取所有选中的节点
      const checkedNodes = checkedInfo.checkedNodes;

      // 从所有节点中筛选出选中的叶子节点
      this.checkedLayers = this.getCheckedLeafNodes(this.layerTreeData, checkedNodes);

      console.log("checkedLayers", this.checkedLayers);
      this.$emit('layer-change', this.checkedLayers, activeLayer);
    }

  }
};
</script>

<style lang="scss" scoped>
.layer-tree-container {
  position: absolute;
  top:20px;
  left: 20px;
  width: 200px;
  height: 480px;
  overflow: hidden; 
  background: #FFFFFF;
  z-index: 100;
  /* 添加头部装饰条 */
  border-top: 4px solid #307EFF;
  .layer-tree {
    ::v-deep .el-tree-node__content {
      height: 36px !important;
      width: 194px !important; /* 固定宽度 */
      transition: background-color 0.2s ease;
    }
    /* 为树节点添加斑马纹效果 */
    ::v-deep .el-tree-node:nth-child(even) > .el-tree-node__content {
      background-color: #f8f9fa; /* 偶数行背景色 */
    }
    ::v-deep .el-tree-node:nth-child(odd) > .el-tree-node__content {
      background-color: #ffffff; /* 奇数行背景色 */
    }
    /* 鼠标悬停时的效果 */
    ::v-deep .el-tree-node__content:hover {
      background-color: #ecf5ff !important;
    }
    /* 选中时的效果 */
    ::v-deep .el-tree-node.is-selected > .el-tree-node__content {
      background-color: #e6f4ff;
    }
  }
}
</style>